<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>汽车保养与维修系统</title>
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<script src="js/jquery-3.2.0.min.js" ></script>
	<script src="js/bootstrap.min.js" ></script>
	<script src="js/config.js"></script>
	<style>
		html,body {height:100%;width:100%;position:absolute;}
		#mainFrame {height:100%;width:100%;}
		#hole {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);padding:200px;}
		.wq-center {background:rgba(255,255,255,0.7);padding:20px;width:400px;margin:0 auto;border-radius:10px;}
	</style>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<a class="navbar-brand" style="padding:2px" href="#"><img width="46" src="img/logo.png"/></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div id="cat" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="wq-li active"><a id="preferential" target="mainFrame" href="http://www.taobao.com">优惠</a></li>
					<li class="wq-li" ><a id="repair" target="mainFrame" href="http://www.baidu.com">维修</a></li>
					<li class="wq-li"><a id="maintenance" target="mainFrame" href="http://www.douyu.com">保养</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a id="login" href="#">登录</a></li>
					<li><a id="register" href="#">注册</a></li>
					<li class="wq-li"><a id="myReservation" style="display:none" target="mainFrame" href="#">我的预约</a></li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
	<article style="position:absolute;top:52px;left:0;right:0;bottom:0;">
		<iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com"></iframe>
	</article>
	<article id="hole" style="display:none">
		<section id="loginFrame" class="wq-center" style="display:none">
			<h2>登录</h2>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-addon" id="basic-addon1"><span
					class="glyphicon glyphicon-user"></span>
				</span> <input name="username" type="text"
					class="form-control" placeholder="Username"
					aria-describedby="basic-addon1">
			</div>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-addon" id="basic-addon1"><span
					class="glyphicon glyphicon-link"></span>
				</span> <input name="password" type="password"
					class="form-control" placeholder="Password" aria-describedby="basic-addon1">
			</div>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-btn"> <input id="loginBtn"
					style="float: right" class="btn btn-default" type="submit"
					style="width:50%">Submit</input> </span>
			</div>
		</section>
		<section id="registerFrame" class="wq-center" style="display:none">
			<h2>注册</h2>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-addon" id="basic-addon1"><span
					class="glyphicon glyphicon-user"></span>
				</span> <input name="username" type="text"
					class="form-control" placeholder="Username"
					aria-describedby="basic-addon1">
			</div>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-addon" id="basic-addon1"><span
					class="glyphicon glyphicon-link"></span>
				</span> <input name="password" type="password"
					class="form-control" placeholder="Password" aria-describedby="basic-addon1">
			</div>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-addon" id="basic-addon1"><span
					class="glyphicon glyphicon-link"></span>
				</span> <input name="repassword" type="password"
					class="form-control" placeholder="RePassword" aria-describedby="basic-addon1">
			</div>
			<div class="input-group wq-list-grounp-item">
				<span class="input-group-btn"> <input id="registerBtn"
					style="float: right" class="btn btn-default" type="submit"
					style="width:50%">Submit</input> </span>
			</div>
		</section>
	</article>
	<script>
		var $myReservation = $('#myReservation');
		$('#preferential').attr('href',PREFERENTIAL_URL);
		$('#repair').attr('href',REPAIR_URL);
		$('#maintenance').attr('href',MAINTENANCE_URL);
		$('#mainFrame').attr('src',PREFERENTIAL_URL);
		$myReservation.attr('href',RESERVATION_URL);
		
		var $lis = $("#cat").find('.wq-li');
		$lis.on('click',function(){
			$lis.removeClass('active');
			$(this).addClass('active');
		});
		var $hole = $('#hole');
		var hideHole = function(){
			$hole.find('#loginFrame').css('display','none');
			$hole.find('#registerFrame').css('display','none');
			$hole.css('display','none');
		}
		
		$('#loginFrame').on('click',function(){
			return false;
		})
		
		$('#registerFrame').on('click',function(){
			return false;
		})
		
		var showHole = function(){
			$hole.css('display','block');
		}
		
		$hole.on('click',function(){
			hideHole();
		});
		var login = function(){
			showHole();
			$('#loginFrame').css('display','block');
		}
		$('#login').on('click',function(){
			login();
		});
		$('#register').on('click',function(){
			showHole();
			$('#registerFrame').css('display','block');
		});
		
		var isSuc = function(res){
			var re = res.code == 200;
			return re ? res.data : false;
		}
		
		$.get(CHECK_LOGIN_URL,{},function(res){
			var sucData = isSuc(res);
			if(sucData){
				hideHole();
				$('#login').hide();
				$('#register').hide();
				$('#myReservation').show();
			}
		},'json')
		
		$('#loginBtn').on('click',function(){
			var username = $('#loginFrame').find('input[name=username]').val();
			var password = $('#loginFrame').find('input[name=password]').val();
			$.post(LOGIN_URL,{username:username,password},function(res){
				var sucData = isSuc(res);
				if(sucData){
					alert(sucData.msg);
					hideHole();
					$('#login').hide();
					$('#register').hide();
					$('#myReservation').show();
				}else{
					alert(res.msg);
				}
			},'json');
		});
		
		console.log($('#registerBtn'));
		$('#registerBtn').on('click',function(){
			console.log('registerBtn');
			var username = $('#registerFrame').find('input[name=username]').val();
			var password = $('#registerFrame').find('input[name=password]').val();
			var repassword = $('#registerFrame').find('input[name=repassword]').val();
			if(password == repassword){
				$.post(REGISTER_URL,{username:username,password:password},function(res){
					var sucData = isSuc(res);
					if(sucData){
						alert(sucData.msg);
						hideHole();
						$('#login').click();
						$('#loginFrame').find('input[name=username]').val(username);
						$('#loginFrame').find('input[name=password]').val(password);
					}else{
						alert(res.msg);
					}
				},'json');
			}else{
				alert('两次输入的密码不一致');
			}
		});
		console.log($('#registerBtn'));
		
	</script>
</body>
</html>
